<template>
	<view>
		<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"></camera>
		<image mode="widthFix" class="image" :src="photoPath" v-if="showImage"></image>
		<view class="operate-container">
			<button type="primary" class="btn" @tap="clickBtn" :disabled="!canCheckin">{{btnText}}</button>
			<button type="warn" class="btn" @tap="afresh" :disabled="!canCheckin">重拍</button>
		</view>
		<view class="notice-container">
			<text class="notice">注意事项</text>
			<text class="desc">拍照签到的时候，必须要拍摄自己的正面照片，侧面照片会导致无法识别，另外拍照的时候不要戴墨镜或者帽子避免影响签到的准确度</text>
		</view>
	</view>
</template>

<script>
	// 导入腾讯位置的SDK
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	//定义接收腾讯位置的变量
	var qqmapsdk;
	export default {
		data() {
			return {
				canCheckin: true,
				photoPath: '',
				btnText: '拍照',
				showCamera: true,
				showImage: false
			}
		},
		onLoad:function(){
			// 开启腾讯位置服务
			qqmapsdk = new QQMapWX({
				// 腾讯位置key
				key:"IFFBZ-L2DWU-PNXVJ-GROWV-NJYZ2-IIFLU"
			})
			
		},
		// 当页面被点开时加载
		onShow:function(){
			let that = this
			// 检测当前是否可以考勤
			that.ajax(that.url.checkIsAttendance,"POST",null,function(resp){
				let data = resp.data;
				if(!data.isCheckIn){
					uni.showToast({
						title:"您当前不在考勤范围中",
						icon:"none"
					})
					setTimeout(function(){
						uni.switchTab({
							url:'../../pages/index/index'
						})
					},1000)
				}
			})
		},
		methods: {
			// 拍照并获取照片
			clickBtn:function(){
				let that = this;
				// 判断当前按钮的文字是否为拍照
				if(that.btnText == '拍照'){
					// 获取摄像头上下文对象
					let ctx = uni.createCameraContext();
					// 拍照
					ctx.takePhoto({
						// 质量高
						quality:'high',
						// 成功时的回调函数
						success: function(resp){
							// 获取照片地址
							console.log(resp.tempImagePath);
							// 将VM中的photoPath进行赋值
							that.photoPath = resp.tempImagePath;
							// 摄像头页面关闭
							that.showCamera = false;
							// 照片页面打开
							that.showImage = true;
							// 按钮变为签到
							that.btnText = "签到"
						}
					});
				}else{
					//执行签到功能,拍照之后文字变为签到，点击签到就会跳转到这里
					//由于签到过程复杂，需要上传照片，位置进行一系列的比对操做，所以会消耗时间所以展示等待内容
					uni.showLoading({
						title:"正在签到"
					});
					// 设置等待结束的定时器
					setTimeout(function(){
						uni.hideLoading()
					},3000);
					// 调用授权微信用户可以使用位置
					uni.authorize({
					    scope: 'scope.userLocation',
					    success() {
					        uni.getLocation()
					    }
					})
					//获取具体的地址
					uni.getLocation({
						type:"wgs84",
						success:function(resp){
							// 获取手机经度
							let latitude = resp.latitude;
							// 获取手机纬度
							let longitude = resp.longitude;
							// 调用腾讯微信SDK的reverseGeocoder函数传入经纬度获取具体的位置
							qqmapsdk.reverseGeocoder({
								location:{
									latitude:latitude,
									longitude:longitude
								},
								success:function(resp){
									// 获取经纬度返回的address数据
									let address = resp.result.address
									//获取JSON数据
									let addressComponent=resp.result.address_component
									//从JSON获取国家名
									let nation = addressComponent.nation;
									//从JSON获取省份名
									let province = addressComponent.province;
									//从JSON获取所在城市名
								    let city = addressComponent.city;
									//从JSON获取所在区域名称
									let district = addressComponent.district;
									//从JSON获取所在街道名
									let street = addressComponent.street;
									//从JSON获取街道门牌名
									let streetNumber = addressComponent.street_number;
									//封装打卡地点
									let addressForm = {
										nation:nation,
										province:province,
										city:city,
										district:district,
										street:street,
										streetNumber:streetNumber
									}
									// 上传文件的ajax，由于需要上传文件所以不采用封装的ajax
									uni.uploadFile({
										// 上传到的url路径
										url:that.url.checkin,
										// 获取要上传的文件所在的路径
										filePath:that.photoPath,
										// key为photo方便后端找到photo进行解析
										name:"photo",
										// 头部需要带上对应的token进行上传
										header:{
											token:uni.getStorageSync("token")
										},
										// 上传的数据进行封装
										formData:addressForm,
										// 成功后的回调函数
										success:function(resp){
											let data = JSON.parse(resp.data);
											//不存在人脸模型
											if(data.code==5001){
												uni.hideLoading();
												uni.showModal({
													title:"提示消息",
													content:"系统中不存在您的人脸识别模型，是否用当前照片作为人脸识别模型",
													success:function(rep){
														// 当点击确定时的动作
														if(rep.confirm){
															// 上传当前的图片文件作为人脸识别模型的数据文件到后端
															uni.uploadFile({
																// 创建人脸模型的url地址
																url:that.url.createFaceModel,
																// 图片的路径
																filePath:that.photoPath,
																// 参数名
																name:"photo",
																// 头部token
																header:{
																	token:uni.getStorageSync("token")
																},
																// 回调函数
																success:function(resp){
																	let data = JSON.parse(resp.data);
																	console.log(data)
																	if(data.code==20000){
																		uni.showToast({
																			title:"人脸模型创建成功",
																			icon:"none"
																		})
																	}else if(data.code == 40000){
																		uni.showToast({
																			title:"当前图片无人脸",
																			icon:"none"
																		})
																	}else if(data.code == 5002){
																		uni.showToast({
																			title:"当前签到地点错误",
																			icon:"none"
																		})
																	}
																	else{
																		uni.showToast({
																			title:"人脸模型创建失败",
																			icon:"none"
																		})
																	}
																}
															})
														}
													}
												})
											}
											// 存在人脸模型
											else if(data.code==20000){
												// 返回的内容是字符串类型的,需要使用JSON进行转换
												let data = JSON.parse(resp.data);
												let code = data.code;
												let msg = data.msg;
												if(code==20000){
													uni.hideLoading()
													setTimeout(function(){
														uni.showToast({
															title:"签到成功",
															// 完成后的动作
															complete:function(){
																uni.redirectTo({
																	url:'/page_aw/checkin_result/checkin_result'
																})
															}
														})
													},3000)
													// 签到按钮不可用
													that.canCheckin = false
												}else{
													uni.hideLoading()
													uni.showToast({
														title:"签到失败,请重试",
														icon:"none"
													})
												}
											}
											//签到失败
											else if(data.code == 5002){
												uni.showToast({
													title:data.msg,
													icon:"error"
												})
											}else{
												uni.showToast({
													title:data.msg,
													icon:"none"
												})
											}
										}
									})
								}
							});
						}
					})
				}
			},
			// 重新拍照
			afresh:function(){
				let that = this;
				that.showCamera = true;
				that.showImage = false;
				that.btnText = "拍照";
			}
		}
	}
</script>

<style lang="less">
@import url("checkin.less");
</style>
